<!--
 * @Description: 汽车文章列表
 * @Author: xiao li
 * @Date: 2021-12-01 16:31:37
 * @LastEditTime: 2021-12-24 11:03:18
 * @LastEditors: xiao li
-->
<template>
  <div>
    <div
      class="car-article-item fill-base pd-lg mt-md"
      v-for="(item, index) in 3"
      :key="index"
    >
      <div class="flex-center">
        <img class="avatar radius" :src="image" />
        <div class="flex-1 flex-between ml-md">
          <div class="flex-center flex-column">
            <div class="f-paragraph c-title text-bold max-456 ellipsis">
              粱振雅
            </div>
          </div>
          <div
            class="chat-btn flex-center f-caption c-base radius"
            :style="{ background: primaryColor }"
          >
            咨询
          </div>
        </div>
      </div>
      <div class="f-title c-title text-bold mt-md">文章名称</div>
      <div class="f-paragraph c-title mt-md mb-md">文章副标题</div>
      <img class="cover" :src="image" />
      <div class="flex-center mt-md mb-md">
        <div class="article-label flex-y-center pl-sm pr-sm">
          <img
            class="label-img mr-sm"
            src="https://lbqny.migugu.com/admin/car/article_label.png"
          />
          <div class="f-icontext c-title ellipsis">文章标签</div>
        </div>
        <div class="flex-1"></div>
      </div>
      <div class="count-item flex-between f-caption c-title">
        <div class="flex-y-center">
          <i class="iconfont iconshijian1"></i>
          <div>8小时前</div>
        </div>
        <div class="flex-y-center">
          <div class="flex-y-baseline mr-md">
            <i class="iconfont iconxiaoxi"></i>
            <div>26</div>
          </div>
          <div class="flex-y-baseline ml-lg">
            <i class="iconfont iconlike"></i>
            <div>26</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'carArticle',
  props: {
    o: Object
  },
  data () {
    return {
      primaryColor: '#19c865',
      image: 'https://lbqny.migugu.com/admin/diy/default.png'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.label-img {
  width: 10px;
  height: 10px;
}
.article-label {
  min-width: 70px;
  height: 29px;
  background: #f6f6f6;

  .ellipsis {
    max-width: 325px;
  }
}

.car-article-item {
  .avatar {
    width: 31px;
    height: 31px;
  }

  .chat-btn {
    width: 55px;
    height: 27px;
  }

  .cover {
    width: 343px;
    height: 188px;
    background: #f4f6f8;
  }

  .count-item {
    .iconfont {
      font-size: 14px;
      margin-right: 4px;
    }
  }

  .comment-btn {
    height: 31px;
    background: #f6f6f8;
  }
}
</style>
